<template>
	<view class="container">
		<uni-nav-bar height="125rpx" :border="false" left-icon="left" right-text="搜索" @clickRight="performSearch()"
			@clickLeft="navLeft()">
			<view class="input-view-box">
				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" size="40rpx" color="#999" />
					<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
						v-model="searchQuery" />
				</view>
			</view>
		</uni-nav-bar>
		<view class="history">
			<view class="sou">
				<text class="title">历史搜索</text>
				<uni-icons class="trash" type="trash" size="20" @click="clearHistory()"></uni-icons>
			</view>
			<view class="tags">
				<block v-for="(item, index) in historyTags" :key="index">
					<view class="tag">{{ item }}</view>
				</block>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	const searchQuery = ref("")
	const historyTags = ref(['天安门', '景山公园', '希尔盾', '温泉酒店', '中山公园', '关键词语', '搜索关键词', '关键词'])

	function performSearch() {
		// 执行搜索的逻辑
		console.log(`搜索: ${searchQuery.value}`);
		uni.navigateTo({
			url: "/pagesA/ticketOrders/search/search_result"
		})
	}

	function clearHistory() {
		// 清除历史的逻辑
		this.historyTags = [];
		console.log('历史搜索已清除');
	}

	function navLeft() {
		uni.navigateBack()
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		/* background-color: #fff; */
	}

	.history {
		padding: 10rpx;
	}

	.sou {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
	}

	.title {
		font-size: 30rpx;
		/* font-weight: bold; */
		margin-bottom: 5px;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
	}

	.tag {
		background-color: #f7f7f7;
		border-radius: 30rpx;
		padding: 10rpx 25rpx;
		margin: 15rpx;
		font-size: 25rpx;
	}

	.input-view-box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.input-view {
		width: 100%;
		border: #007aff 1rpx solid;
		display: flex;
		align-items: center;
		padding: 15rpx 20rpx;
		border-radius: 50rpx;
	}

	.input-view input {
		font-size: 30rpx;
		margin-left: 10rpx;
		flex: 1;
	}

	:deep(.uni-navbar__header-btns-left) {
		width: 8% !important;
	}

	:deep(.uni-navbar__header-btns-right) {
		width: 8% !important;
	}

	:deep(.uni-navbar-btn-text>.uni-nav-bar-right-text>span) {
		font-size: 25rpx;
		color: #007aff;
	}
</style>